<template>
  <div class="page-header-index-wide">
    <div style="marginBottom: 0px" class="personsum">
      <a-button type="primary" style="marginRight: 150px">李静医师&nbsp;&nbsp;&nbsp;当前科室：骨科一</a-button>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
      <p>本科病人：153人&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</p>
      <p>本科病人：153人&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</p>
      <p>本科病人：153人&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</p>
      <p>本科病人：153人&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</p>
    </div>
    <a-card :loading="loading" :bordered="false" :body-style="{padding: '0'}">
      <div class="salesCard">
        <a-tabs
          default-active-key="1"
          size="large"
          :tab-bar-style="{marginBottom: '24px', paddingLeft: '16px'}"
        >
          <a-tab-pane loading="true" tab="销售额" key="1">
            <a-row>
              <a-col :xl="12" :lg="12" :md="12" :sm="24" :xs="24">
                <LineChartMultid />
              </a-col>
              <a-col :xl="12" :lg="12" :md="12" :sm="24" :xs="24">
                <bar title="销售额排行" :dataSource="barData" />
              </a-col>
              <a-col :xl="12" :lg="12" :md="12" :sm="24" :xs="24">
                <BarAndLine />
              </a-col>
              <a-col :xl="12" :lg="12" :md="12" :sm="24" :xs="24">
                <Pie/>
              </a-col>
            </a-row>
          </a-tab-pane>
        </a-tabs>
      </div>
    </a-card>
    <a-card :bordered="false">
      <a-tabs defaultActiveKey="1" @1="callback">
        <a-tab-pane tab="柱状图" key="1">
          <a-row :gutter="24">
            <a-col :span="10">
              <a-radio-group :value="barType" @1="statisticst">
                <a-radio-button value="year">按年统计</a-radio-button>
                <a-radio-button value="month">按月统计</a-radio-button>
                <a-radio-button value="category">按类别统计</a-radio-button>
                <a-radio-button value="cabinet">按柜号统计</a-radio-button>
              </a-radio-group>
            </a-col>
            <a-col :span="14">
              <a-form v-if="barType === 'month' && false" layout="inline" style="margin-top: -4px">
                <a-form-item label="月份区间">
                  <a-range-picker
                    :placeholder="['开始月份', '结束月份']"
                    format="YYYY-MM"
                    :value="barValue"
                    :mode="barDate"
                    @panel1="handleBarDate"
                  />
                </a-form-item>
                <a-button
                  style="margin-top: 2px"
                  type="primary"
                  icon="search"
                  @click="queryDatebar"
                >查询</a-button>
                <a-button
                  style="margin-top: 2px;margin-left: 8px"
                  type="primary"
                  icon="reload"
                  @click="searchReset"
                >重置</a-button>
              </a-form>
            </a-col>
            <bar class="statistic" title="档案统计" :dataSource="countSource" :height="400" />
          </a-row>
        </a-tab-pane>

        <a-tab-pane tab="饼状图" key="2">
          <a-row :gutter="24">
            <a-col :span="10">
              <a-radio-group :value="pieType" @change1="statisticst">
                <a-radio-button value="year">按年统计</a-radio-button>
                <a-radio-button value="month">按月统计</a-radio-button>
                <a-radio-button value="category">按类别统计</a-radio-button>
                <a-radio-button value="cabinet">按柜号统计</a-radio-button>
              </a-radio-group>
            </a-col>
            <a-col :span="14">
              <a-form v-if="pieType === 'month' && false" layout="inline" style="margin-top: -4px">
                <a-row :gutter="24">
                  <a-form-item label="月份区间">
                    <a-range-picker
                      :placeholder="['开始月份', '结束月份']"
                      format="YYYY-MM"
                      :value="pieValue"
                      :mode="pieDate"
                      @panelChange1="handlePieDate"
                    />
                  </a-form-item>
                  <a-button
                    style="margin-top: 2px"
                    type="primary"
                    icon="search"
                    @click="queryDatepie"
                  >查询</a-button>
                  <a-button
                    style="margin-top: 2px;margin-left: 8px"
                    type="primary"
                    icon="reload"
                    @click="searchReset"
                  >重置</a-button>
                </a-row>
              </a-form>
            </a-col>
            <pie class="statistic" title="档案统计" :dataSource="countSource" :height="450" />
          </a-row>
        </a-tab-pane>
      </a-tabs>
    </a-card>
    <company-profile />
  </div>
</template>

<script>
import ChartCard from '@/components/ChartCard'
import ACol from 'ant-design-vue/es/grid/Col'
import ATooltip from 'ant-design-vue/es/tooltip/Tooltip'
import MiniArea from '@/components/chart/MiniArea'
import MiniBar from '@/components/chart/MiniBar'
import MiniProgress from '@/components/chart/MiniProgress'
import RankList from '@/components/chart/RankList'
import { getAction } from '@/api/manage'
import Bar from '@/components/chart/Bar'
import AreaChartTy from '../../components/chart/AreaChartTy'
import Pie from '@/components/chart/Pie'
import LineChartMultid from '@/components/chart/LineChartMultid'
import HeadInfo from '@/components/tools/HeadInfo.vue'
import CompanyProfile from '../../components/knowlage/companyProfile'
import BarAndLine from '../../components/chart/BarAndLine'

import Trend from '@/components/Trend'
import { getLoginfo, getVisitInfo } from '@/api/api'

const rankList = []
for (let i = 0; i < 7; i++) {
  rankList.push({
    name: '白鹭岛 ' + (i + 1) + ' 号店',
    total: 1234.56 - i * 100
  })
}
const barData = []
for (let i = 0; i < 12; i += 1) {
  barData.push({
    x: `${i + 1}月`,
    y: Math.floor(Math.random() * 1000) + 200
  })
} 
export default {
  //首页图标
  name: 'Analysis',
  components: {
    ATooltip,
    CompanyProfile,
    ACol,
    ChartCard,
    MiniArea,
    MiniBar,
    MiniProgress,
    RankList,
    Bar,
    Pie,
    AreaChartTy,
    Trend,
    LineChartMultid,
    HeadInfo,
    BarAndLine
  },
  data() {
    return {
      loading: true,
      center: null,
      rankList,
      barData,
      countSource: [],
      loginfo: {},
      visitFields: ['ip', 'visit'],
      visitInfo: [],
      indicator: <a-icon type="loading" style="font-size: 24px" spin />,
      description: '档案统计页面',
      // 查询条件
      queryParam: {},
      // 数据集
      countSource: [],
      // 柱状图
      barType: 'year',
      barDate: ['month', 'month'],
      barValue: [],
      // 饼状图
      pieType: 'year',
      pieDate: ['month', 'month'],
      pieValue: [],
      // 统计图类型
      tabStatus: 'bar',
      url: {
        getYearCountInfo: '/api/report/getYearCountInfo',
        getMonthCountInfo: '/api/report/getMonthCountInfo',
        getCntrNoCountInfo: '/api/report/getCntrNoCountInfo',
        getCabinetCountInfo: '/api/report/getCabinetCountInfo'
      }
    }
  },

  created() {
    setTimeout(() => {
      this.loading = !this.loading
    }, 1000)
    this.initLogInfo()
    let url = this.url.getYearCountInfo
    this.loadDate(url, 'year', {})
  },
  methods: {
    
    loadDate(url, type, param) {
      getAction(url, param, 'get').then(res => {
        if (res.success) {
          this.countSource = []
          if (type === 'year') {
            this.getYearCountSource(res.result)
          }
          if (type === 'month') {
            this.getMonthCountSource(res.result)
          }
          if (type === 'category') {
            this.getCategoryCountSource(res.result)
          }
          if (type === 'cabinet') {
            this.getCabinetCountSource(res.result)
          }
        } else {
          var that = this
          that.$message.warning(res.message)
        }
      })
    },
    getYearCountSource(data) {
      for (let i = 0; i < data.length; i++) {
        if (this.tabStatus === 'bar') {
          this.countSource.push({
            x: `${data[i].year}年`,
            y: data[i].yearcount
          })
        } else {
          this.countSource.push({
            item: `${data[i].year}年`,
            count: data[i].yearcount
          })
        }
      }
    },
    getMonthCountSource(data) {
      for (let i = 0; i < data.length; i++) {
        if (this.tabStatus === 'bar') {
          this.countSource.push({
            x: data[i].month,
            y: data[i].monthcount
          })
        } else {
          this.countSource.push({
            item: data[i].month,
            count: data[i].monthcount
          })
        }
      }
    },
    getCategoryCountSource(data) {
      for (let i = 0; i < data.length; i++) {
        if (this.tabStatus === 'bar') {
          this.countSource.push({
            x: data[i].classifyname,
            y: data[i].cntrnocount
          })
        } else {
          this.countSource.push({
            item: data[i].classifyname,
            count: data[i].cntrnocount
          })
        }
      }
    },
    getCabinetCountSource(data) {
      for (let i = 0; i < data.length; i++) {
        if (this.tabStatus === 'bar') {
          this.countSource.push({
            x: data[i].cabinetname,
            y: data[i].cabinetcocunt
          })
        } else {
          this.countSource.push({
            item: data[i].cabinetname,
            count: data[i].cabinetcocunt
          })
        }
      }
    },
    // 选择统计图类别
    callback(key) {
      if (key === '1') {
        this.tabStatus = 'bar'
        this.queryDatebar()
      } else {
        this.tabStatus = 'pie'
        this.queryDatepie()
      }
    },
    // 选择统计类别
    statisticst(e) {
      if (this.tabStatus === 'pie') {
        this.pieType = e.target.value
        this.queryDatepie()
      } else {
        this.barType = e.target.value
        this.queryDatebar()
      }
    },
    // 按月份查询
    queryDatebar() {
      if (this.barValue.length > 0) {
        this.getUrl(this.barType, { startTime: this.barValue[0]._d, endTime: this.barValue[1]._d })
      } else {
        this.getUrl(this.barType, {})
      }
    },
    queryDatepie() {
      if (this.pieValue.length > 0) {
        this.getUrl(this.pieType, { startTime: this.pieValue[0]._d, endTime: this.pieValue[1]._d })
      } else {
        this.getUrl(this.pieType, {})
      }
    },
    searchReset() {
      console.log(this.tabStatus)
      if (this.tabStatus === 'pie') {
        this.pieValue = []
      } else {
        this.barValue = []
      }
      this.getUrl(this.barType, {})
    },
    // 选择请求url
    getUrl(type, param) {
      let url = ''
      if (type === 'year') {
        url = this.url.getYearCountInfo
      }
      if (type === 'month') {
        url = this.url.getMonthCountInfo
      }
      if (type === 'category') {
        url = this.url.getCntrNoCountInfo
      }
      if (type === 'cabinet') {
        url = this.url.getCabinetCountInfo
      }
      this.loadDate(url, type, param)
    },
    // 选择月份日期
    handleBarDate(value, mode) {
      this.barValue = value
      this.barDate = [mode[0] === 'date' ? 'month' : mode[0], mode[1] === 'date' ? 'month' : mode[1]]
    },
    handlePieDate(value, mode) {
      this.pieValue = value
      this.pieDate = [mode[0] === 'date' ? 'month' : mode[0], mode[1] === 'date' ? 'month' : mode[1]]
    },
    initLogInfo() {
      getLoginfo(null).then(res => {
        if (res.success) {
          Object.keys(res.result).forEach(key => {
            res.result[key] = res.result[key] + ''
          })
          this.loginfo = res.result
        }
      })
      getVisitInfo().then(res => {
        if (res.success) {
          console.log('aaaaaa', res.result)
          this.visitInfo = res.result
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.circle-cust {
  position: relative;
  top: 28px;
  left: -100%;
}
.extra-wrapper {
  line-height: 55px;
  padding-right: 24px;

  .extra-item {
    display: inline-block;
    margin-right: 24px;

    a {
      margin-left: 24px;
    }
  }
}

/* 首页访问量统计 */
.head-info {
  position: relative;
  text-align: left;
  padding: 0 32px 0 0;
  min-width: 125px;

  &.center {
    text-align: center;
    padding: 0 32px;
  }

  span {
    color: rgba(0, 0, 0, 0.45);
    display: inline-block;
    font-size: 0.95rem;
    line-height: 42px;
    margin-bottom: 4px;
  }
  p {
    line-height: 42px;
    margin: 0;
    a {
      font-weight: 600;
      font-size: 1rem;
    }
  }
}
.footer-name {
  margin: auto;
  text-align: center;
  margin-top: 80px;
}
.personsum {
  display: flex;

  a-button {
    padding-right: 100px;
  }
  p {
    margin-left: 20px;
    line-height: 2.4;
  }
}
.layout .header {
  background-color: #13c2c2 !important;
}
</style>